<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue.js入门教程</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js" ></script>
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!--<script type="application/javascript" src="../js/vue.js"></script>-->
</head>
<body>
    <input type="file">
<!--    <input type="image">-->
    <button type="button">click</button>
    <p>
    
    </p>
    
    <style type="text/css">
.file-box{ position:relative;width:340px} 
.txt{ height:22px; border:1px solid #cdcdcd; width:200px;border-right:none;} 
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:26px; width:70px;} 
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
<div class="file-box"> 
    <form action="" method="post" enctype="multipart/form-data"> 
        <input type='text' name='textfield' id='textfield' class='txt' /><input type='button' class='btn' value='浏览...' />
        <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> 
    </form> 
</div>
<script>
//    		来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
    $(document).ready(function(){
       $("button").click(function(){
//          alert($("input").value);
              console.log($("#fileField").value);

       });
    });
    
</script>
</body>
</html>

